<template>
  <van-swipe :autoplay="3000" lazy-render indicator-color="#46a6b3">
    <van-swipe-item v-for="item in hot3Goods" :key="item.id">
      <img class="carousel-img" :src="item.image" />
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 轮播列表：系统每天抽取数据库昨天浏览量最高的前三道菜品
  // 先拿到所有商品数据，再做处理
  goodsList: {
    type: Array,
    default: []
  }
})
// 计算出销量最高的三件商品
const hot3Goods = computed(() => {
  const goodsList2 = JSON.parse(JSON.stringify(props.goodsList))
  goodsList2.sort((a, b) => a.sales - b.sales)
  return goodsList2.slice(0, 3)
})
</script>

<style lang="less" scoped>
.carousel-img{
  height: 120px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
</style>